<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="checkbox" id="1"> 1 <br>
<input type="checkbox" id="2"> 2 <br>
<input type="checkbox" id="3"> 3 <br>
<input type="checkbox" id="4"> 4 <br>
<input type="checkbox" id="5"> 5 <br>
<input type="checkbox" id="6"> 6 <br>
<input type="checkbox" id="7"> 7 <br>
<input type="checkbox" id="8"> 8 <br>
<input type="checkbox" id="9"> 9 <br>
<input type="checkbox" id="10"> 10 <br>

<script>
    //代理模式 是为一个对象 提供一个代用品或占位符。以便控制对他的访问

    //单一职责原则：一个类（包括对象和函数）应该仅有一个引起它变化的原因

    //将行为分布到细粒度的对象中
    var synchronousFile = function (id) {
        console.log('开始同步文件，id为：'+id);
    }

    var proxySynchronousFile = (function () {
        var cache = [],timer;
        return function (id) {
            cache.push(id);
            if(timer){
                return
            }
            timer = setTimeout(function () {
                synchronousFile(cache.join(','));
                clearTimeout(timer);
                timer=null;
                cache.length=0;
            },2000)
        }
    })();

    var checkbox = document.getElementsByTagName('input');
    for(var i= 0,c;c = checkbox[i++];){
        c.onclick = function () {
            if(this.checked === true){
                proxySynchronousFile(this.id);
            }
        }
    }
</script>
</body>
</html>